<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

	<script type="text/javascript">
		$(document).ready(function(){
			var countryRegos = {};
            countryRegos['N'] = 'THE UNITED STATES OF AMERICA';
            countryRegos['VH'] = 'AUSTRALIA';
            countryRegos['C'] = 'CANADA';
			
			$('#searchButton').click(function(){
				var mark = $("#mark").val();
				if(mark == '') {
					alert('Please provide aircraft mark');
					return;
				}
                $.getJSON('<c:url value="api/aircraft/'+ mark +'"/>',
                        function(data, status) {
                			if(!data) {
                            	alert('Aircraft not found. Available countries:\n1. Australia (VH)\n2. Canada (C)\n3. USA (N)');
                            } else {
                            	alert("Mark: " + data.mark + "\n" + 
                            			"Manufacturer: " + data.manufacturer + "\n" +
                            			"Model: " + data.model + "\n" +
                            			"Serial: " + data.serialNumber + "\n" +
                            			"Operator: " + data.operatorName + "\n" +
                            			"Country: " + countryRegos[data.mark.split("-")[0]] + "\n" +
                            			"State: " + data.operatorState + "\n");
                            }
                        }
                );
			});
		});
	</script>

<div class="box">
	<table style="border: 1px solid gray; width: 100%">
		<tr style="background-color: #f5cc8e;">
			<td>Status</td>
		</tr>
		<tr>
			<td>
				Currently in the database are:
				<ul>
					<li><b><fmt:formatNumber value="${numberOfPhotos}" /></b> photos</li>
					<li><b><fmt:formatNumber value="${numberOfAircrafts}" /></b> aircrafts</li>
					<li><b><fmt:formatNumber value="${numberOfAirports}" /></b> airports</li>
				</ul>
			</td>
		</tr>
	</table>
</div>

<br/>

<div class="box">
	<table style="border: 1px solid gray; width: 100%">
		<tr style="background-color: #f5cc8e;">
			<td colspan="2">Aircraft search</td>
		</tr>
		<tr>
			<td>Mark <input type="text" name="mark" id="mark"></td>
			<td align="left"><input id="searchButton" type="button" class="button" value="Search"></td>
		</tr>
	</table>
</div>

<p align="center">
	<img alt="" src="<c:url value="/resources/AWS_Logo_PoweredBy_127px.png" />">
</p>